<template>
	  <view class="page-container">
	    <view class="title">个人中心</view>
	    <!-- 用户信息区域 -->
	    <view class="user-info">
			<image :src="userAvatar" class="avatar"></image>
	      <view class="user-details">
	        <text class="user-name">{{username}}</text>
	        <text class="user-signature">{{encouragementSlogan}}</text>
	      </view>
	    </view>
	    <!-- 卡片区域 -->
	    <view class="card">
	      <view class="card-item">
	        <text>期限卡</text>
	        <text>1</text>
	      </view>
	      <view class="card-item">
	        <text>优惠券</text>
	        <text>0</text>
	      </view>
	      <view class="card-item">
	        <text>积分</text>
	        <text>0</text>
	      </view>
	    </view>
	    <!-- 功能按钮区域 -->
	    <view class="function-buttons">
	      <view class="function-button">
	        <button @click="toExchange" class="buttons-button">我的套餐</button>
		  </view>
	      <view class="function-button">
	        <button @click="toGetCoupon" class="buttons-button">订单记录</button>
	      </view>
	      <view class="function-button">
	        <button @click="toEarnPoints" class="buttons-button">购买记录</button>
	      </view>
		  <view class="function-button">
		    <button @click="toEarnPoints"  class="buttons-button">储物记录</button>
		  </view>
	    </view>
	    <!-- 订单和客服区域 -->
	    <view class="order">
	      <button class="order-button">预订订单</button>
	      <button class="order-button">商城订单</button>
	      <button class="order-button">兑换订单</button>
	      <button class="order-button">客服中心</button>
	    </view>
	    <!-- 其他功能区域 -->
	    <view class="other-functions">
	      <view class="other-function-item">
	        <button class="other-function-button">WIFI连接</button>
	        <view class="arrow"></view>
	      </view>
	      <view class="other-function-item">
	        <button class="other-function-button">学习排行</button>
	        <view class="arrow"></view>
	      </view>
	      <view class="other-function-item">
	        <button class="other-function-button">签到记录</button>
	        <view class="arrow"></view>
	      </view>
	      <view class="other-function-item">
	        <button class="other-function-button">意见反馈</button>
	        <view class="arrow"></view>
	      </view>
	    </view>
	  </view>
</template>

<script>
	export default {
		data(){
			return{
				userAvatar:'',
				username:'',
				encouragementSlogan:''
			}
		},
	  methods: {
		  userinfo(){
			 uni.request({
			 	url: 'http://localhost:3000/api/userInfo',
			 	method: 'GET',
			 	data: {
			 		username: uni.getStorageSync('username'),
			 	},
			 	success: (res) => {
			 		if (res.data.success) {
			 			this.userAvatar = res.data.user.avatar
						this.encouragementSlogan = res.data.user.encouragementSlogan
						this.username = res.data.user.username
			 		} 
			 	},
			 }); 
		  },
	    toExchange() {
	      // 跳转到兑换页面的逻辑
	      uni.navigateTo({
	        url: '/pages/exchange/exchange'
	      });
	    },
	    toGetCoupon() {
	      // 跳转到领券页面的逻辑
	      uni.navigateTo({
	        url: '/pages/get-coupon/get-coupon'
	      });
	    },
	    toEarnPoints() {
	      // 跳转到赚积分页面的逻辑
	      uni.navigateTo({
	        url: '/pages/earn-points/earn-points'
	      });
	    }
	  },
	  mounted() {
	  	this.userinfo();
	  }
	};
</script>

<style lang="scss" scoped>
.page-container {
 background: linear-gradient(45deg, #ffffff 0%, #68cc6b 99%, #f4f663 100%);
 position: relative;
  height: 100vh;
  padding: 20rpx;
}

.title {
  color: black;
  font-size: 36rpx;
  font-weight: bold;
  margin-top: 20rpx;
  margin-bottom: 30rpx;
}
.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}
.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: linear-gradient(45deg, #ffffff 0%, #68cc6b 99%, #f4f663 100%);;
  margin-right: 20rpx;
}
.user-details {
  color: white;
  font-weight: bold;
}
.user-name {
  font-size: 32rpx;
  margin-right: 15rpx;
}
.user-signature {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.7);
  margin-left: 15rpx;
}
.card {
  background-color: #C1E1C1;
  border: 2rpx solid #FFFFFF;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 40rpx;
  display: flex;
  justify-content: space-around;
}
.card-item {
  text-align: center;
  font-weight: bold;
}
.function-buttons {
  background-color: #C1E1C1;
  border: 2rpx solid #FFFFFF;
  border-radius: 10rpx;
  padding: 22rpx; /* 减少内边距，让按钮整体更紧凑 */
  margin-bottom: 40rpx;
  display: flex;
  justify-content: space-around;
}
.buttons-button{
	font-size: 25rpx;
	font-weight: bold;
	background-color: #C1E1C1;
}
.function-button {
  font-size: 24rpx; /* 缩小字体大小 */
  text-align: center;
  /* 新增控制按钮尺寸的属性（可选，若需更精准控制按钮大小） */
  // min-width: 80rpx; 
  // min-height: 80rpx; 
  // line-height: normal; /* 优化文字行高适配小尺寸 */
}
.order {
  background-color: #C1E1C1;
  border: 2rpx solid #FFFFFF;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 40rpx;
  display: flex;
  flex-wrap: wrap;
}
.order-button{
	font-size: 25rpx;
	font-weight: bold;
	background-color: #C1E1C1;
}
.other-functions {
  background-color: #C1E1C1;
  border: 2rpx solid #ffffff;
  border-radius: 10rpx;
  padding: 35rpx;
  margin-bottom: 20rpx;
  
}
.other-function-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.other-function-button{
	background-color: #C1E1C1;
	font-size: 30rpx;
    font-weight: bold;
}
.arrow {
  width: 0;
  height: 0;
  border-top: 20rpx solid transparent;
  border-bottom: 20rpx solid transparent;
  border-left: 20rpx solid #00ffff;
}
</style>
